<template>
	<view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" :isMaskClick="false">
			<view class="box">
				<view>
					<uni-notice-bar text="打印功能需要开启蓝牙,请先确定是否开启." />
					<uni-list :border="false">
						<uni-list-item showArrow title="打印机" rightText="请选择" clickable v-if="!formData.printSeries"
							@click="openConfirmPrint" :border="false" />
						<uni-list-item showArrow title="打印机" :rightText="formData.printSeries" v-else
							@click="openConfirmPrint" :border="false" clickable />
						<uni-list-item clickable title="打印数量" :border="false">
							<template v-slot:footer>
								<uni-number-box v-model="formData.printNum" :min="1" />
							</template>
						</uni-list-item>
					</uni-list>
					<!-- 还有一个水平方向偏移 -->
				</view>
				<view class="btn-tools">
					<button @click="cancelPrint" type="default" size="mini">取消</button>
					<button @click="submitForm" type="primary" size="mini">打印</button>
				</view>

			</view>
		</uni-popup>

		<uni-popup ref="printModal" type="bottom" background-color="#fff" :isMaskClick="false">
			<uni-section title="选择打印机" type="line">
				<uni-notice-bar text="如果多次连接失败请重启蓝牙或者重启打印机后关闭窗口重试." />
				<view class="box">
					<uni-list>
						<!-- 查出来的打印机列表 -->
						<!-- <uni-list-item title="打印机1" clickable @click="selectPrintSeries({ID:'test'})" /> -->
						<uni-list-item v-for="item in printList" :key="item.id" :title="item.name" clickable
							@click="selectPrintSeries(item)" />
					</uni-list>
					<view class="print-modal-tools">
						<button @click="cancelSelPrint" type="default" size="mini">关闭</button>
					</view>

				</view>

			</uni-section>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRef,
		defineProps
	} from "vue"
	import lpapi from "../../utils/LPAPI/LPAPI.js"
	var tempIndex = 0;

	export default {
		name: "printModal",
		props: ["tempImage"],
		data() {
			return {
				formData: {
					printSeries: "",
					printNum: 1
				},
				printList: [],
				// tempImage:''
			}
		},
		mounted() {
			// console.log(this.props)
			console.log(1)
		},
		methods: {
			openPop(type) {
				this.$refs.popup.open(type)
				// this.tempImage = tempImage
			},
			cancelPrint() {
				lpapi.closePrinter();
				this.$refs.popup.close()
			},
			submitForm() {
				console.log("点击打印")
				if (!this.formData.printSeries) {
					uni.showToast({
						title: '请先连接打印机',
						icon: 'none'
					});
					return
				}
				// 打印
				this.print()
			},
			// 打印
			print() {
				
				const width = 75
				const height = 120

				lpapi.startDrawLabel(width, height, 0);

				// lpapi.drawRectangle(2, 2, width - 4, height - 4, 0.5, false);

				let self = this;

				lpapi.drawImagePath(this.tempImage, 15, 45, 40, 40, function() {
					uni.showLoading({
						title: '打印中',
					})
					tempIndex = self.formData.printNum;
					self.printOneLabel()
				});
			},
			// 打印一个
			printOneLabel() {
				lpapi.print(() => {
					this.printNextLabel();
				})
			},
			// 打印下一个，根据打印数量判断
			printNextLabel() {
				tempIndex--;
				if (tempIndex <= 0) {
					uni.hideLoading({
						success: (res) => {},
					})
					uni.showToast({
						title: '打印成功',
						icon: '',
						image: '',
						duration: 2000,
						mask: true,
					})
					this.cancelPrint()
				} else {
					this.printOneLabel();
				}
			},
			// 打开选择打印机列表的弹窗
			openConfirmPrint() {
				// console.log("aaa")
				this.$refs.printModal.open("center")
				// 查找打印机
				this.getPrintList()
			},
			getPrintList() {
				lpapi.scanedPrinters((list) => {
					console.log("list", list)
					this.printList = list
				})
			},
			// 确定选择和连接打印机
			selectPrintSeries(selectedItem) {

				uni.showLoading({
					title: '连接打印机',
				})
				const deviceName = selectedItem.name || ""

				lpapi.openPrinter(deviceName, (res) => {
					// console.log("连接打印机")
					// console.log('PrinterName：' + lpapi.connectingPrinterDetailInfos().name);
					// console.log('DPI：' + lpapi.connectingPrinterDetailInfos().DPI);
					// console.log('PrintWidth：' + lpapi.connectingPrinterDetailInfos().width);
					// console.log('SoftwareFlags：' + lpapi.connectingPrinterDetailInfos().softFlags);

					uni.hideLoading({
						success: (res) => {},
					})

					uni.showToast({
						title: '连接打印机成功',
						icon: '',
						image: '',
						duration: 2000,
						mask: true,
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
					this.formData.printSeries = selectedItem.name
					// formData.printSeries = selectedItem.ID || "test"
					this.$refs.printModal.close()
				}, function(errorCode) {
					uni.hideLoading({
						success: (res) => {},
					})
					var message = null;
					if (errorCode == 0) {
						message = '打印机连接断开';
					} else if (errorCode == 1) {
						message = '没有搜到打印机';
					}

					uni.showToast({
						title: message,
						icon: '',
						image: '',
						duration: 2000,
						mask: true,
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				})
				// printModal.value.close()
			},
			cancelSelPrint() {
				this.$refs.printModal.close()
			},

		}
	}
</script>

<style lang="scss">
	.box {
		width: calc(80vw);
		padding: 48rpx;
	}

	.btn-tools,
	.print-modal-tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 32px;

		button {
			width: 128rpx;
		}
	}
</style>
